<template>
  <span>
    <span>
      <a-select
          ref="userselect"
          :mode="props.mode"
          :size="size"
          :open="false"
          :style="{ width: props.showButton ? '85%' : '100%' }"
          v-model:value="currentValue"
          @click="showPosPlusModal"
      >
        <a-select-option v-for="item in selectedList" :value="item.positionId" :key="item.positionId">{{
            item.positionName
          }}</a-select-option>
      </a-select>
      <a-button v-if="props.showButton" @click="showPosPlusModal" :size="size" :style="{ width: props.showButton ? '15%' : '0%' }">
        <template #icon>
          <select-outlined />
        </template>
        <span>选择</span>
      </a-button>
    </span>
    <pos-selector-plus ref="posselectorPlus" :max="max" :min="min" :radioModel="radioModel" @onBack="callBack" />
  </span>
</template>
<script setup name="GPos">
import { ref, watch, toRaw, onMounted } from 'vue';
import  PositionApi  from '@/api/sys/positionApi';
// 接收属性
const props = defineProps({
  mode: { type: String, default: 'combobox' },
  showButton: { type: Boolean, default: true },
  radioModel: { type: Boolean, default: false },
  modelValue: { type: Array, default: () => [] },
  min: { type: Number, default: 1 },
  max: { type: Number, default: 100000 },
  size: { type: String, default: 'small' }
});

const currentValue = ref([]);

const selectedList = ref([]);

const posselectorPlus = ref();

watch(
    () => props.modelValue,
    newValue => {
      if (selectedList.value.length == 0) {
        // 获取机构信息
        if (newValue && newValue.length > 0) {
          reload(newValue);
        }
      }
    }
);

onMounted(() => {
  if (selectedList.value.length == 0) {
    // 获取机构信息
    if (props.modelValue && props.modelValue.length > 0) {
      reload(props.modelValue);
    }
  }
});

const reload = async positionIds => {
  const res = await PositionApi.getPositionListByIds({ positionIds: positionIds });
  if (res.data) {
    res.data.forEach(item => {
      currentValue.value.push(item.positionId);
      selectedList.value.push(item);
    });
  }
};

const showPosPlusModal = () => {
  posselectorPlus.value.showPosPlusModal(selectedList.value);
};

/* const removeSelectedItem = record => {
  remove(selectedList.value, item => item.orgId === record.orgId);
  remove(currentValue.value, item => item === record.orgId);
  // 只有ID
  orgselectorPlus.value.delRecord(record);
  emit('update:modelValue', currentValue.value);
  emit(
    'update:label',
    selectedList.value.map(a => a.orgName)
  );
  emit('update:data', selectedList);
}; */

const emit = defineEmits(['update:modelValue', 'update:data', 'update:label', 'change']);

/**
 * 确定
 * @param {*} record
 */
const callBack = records => {
  console.log('records', records);
  selectedList.value = [];
  currentValue.value = [];
  for (let index = 0; index < records.length; index++) {
    const element = {
      positionId: records[index].id,
      positionName: records[index].name
    };
    selectedList.value.push(element);
    // 只有ID
    currentValue.value.push(records[index].id);
  }
  console.log('currentValue.value', toRaw(currentValue.value));
  emit('update:modelValue', toRaw(currentValue.value));
  const label = selectedList.value.map(a => a.positionName);
  emit('update:label', label);
  emit('update:data', selectedList);
  emit('change', toRaw(currentValue.value));
};

defineExpose({});
</script>
<style lang="less" scoped>
.add-user-wrapper {
  display: flex;
  flex-wrap: wrap;
  min-height: 40px;
  padding-left: 5px;
  .add-user-icon {
    display: flex;
    align-items: center;
    width: 40px;
    height: 32px;
    border-radius: 100px;
    border: 1px solid #3370ff;
    justify-content: center;
    margin-right: 8px;
    margin-top: 8px;
    cursor: pointer;
  }
  .add-user-item {
    display: flex;
    align-items: center;
    min-width: 70px;
    max-width: 50%;
    height: 32px;
    background: #eff0f1;
    border-radius: 16px;
    padding: 0 4px;
    margin-right: 8px;
    margin-top: 8px;

    img {
      width: 24px;
      height: 24px;
      border-radius: 12px;
    }
    div {
      padding: 0;
      margin: 0 4px;
      min-width: 28px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    i {
      margin-right: 10px;
      color: #646a73;
      cursor: pointer;
    }
  }
}
.selected-items {
  overflow-y: auto;
  margin: 0 10px 0;
  border: 1px dashed #ccc;
  padding: 4px 4px 0;
  min-height: 34px;
  max-height: 60px;
  .ant-tag {
    margin-bottom: 4px;
  }
}
</style>
